import React, { Component } from "react";
import "./App.css";
import { Route, Link, NavLink, withRouter, Switch, Redirect } from "react-router-dom";
import NotFound from "./views/NotFound";
import WithLazy from "./router/withLazy";
import routes from "./router/routes";

class App extends Component {
  goContextTree = () => {
    console.log("App组件：this.props", this.props);
    this.props.history.push("/ContextTree");
  };

  render() {
    return (
      <div className="app-box">
        <ul className="menu-box">
          <li>
            <Link to="/Home">首页</Link>
          </li>
          <li>
            {/* <Link to="/ComContent">组件的内容</Link> */}
            {/* <Link to={{pathname:"/ComContent"}}>组件的内容</Link> */}
            <NavLink to={{ pathname: "/ComContent" }} activeClassName="active">
              组件的内容
            </NavLink>
          </li>
          <li>
            {/* <Link to="/RefsDemo">refs</Link> */}
            <NavLink to={{ pathname: "/RefsDemo" }} activeClassName="active">
              refs
            </NavLink>
          </li>
          <li>
            <Link to="/MockVModel">受控组件(双向绑定)</Link>
          </li>
          <li>
            <Link to="/CRUD">CRUD案例</Link>
          </li>
          <li>
            <Link to="/Lifecycle">生命周期</Link>
          </li>
          <li>
            <Link to="/Optimization">性能优化</Link>
          </li>
          <li>
            <span>组件间通信</span>
            <ul>
              <li>
                <Link to="/ParentHuToSon">父子组件用props</Link>
              </li>
              <li>
                <Link to="/ParentToSonUseRef">父-》子用ref</Link>
              </li>
              <li>
                <Link to="/BrotherChuan">兄弟组件（非父子）</Link>
              </li>
              <li>
                <Link to="/BrotherChuanUseStateUp">兄弟组件（状态提升）</Link>
              </li>
              <li>
                <Link to="/ContextTree">状态树传参（跨级）</Link>
              </li>
            </ul>
          </li>
          <li>
            <Link to="/HOC">高阶组件</Link>

            <input
              type="button"
              value="去状态树传参页面"
              onClick={this.goContextTree}
            />
          </li>
          <li>
            <Link to="/SecondRoute">部门用户管理</Link>
          </li>
          <li>
            <span>路由传参</span>
            <ul>
              <li>
                <Link to="/Params">Params</Link>
              </li>
              <li>
                <Link to="/Query">Query</Link>
              </li>
              <li>
                <Link to="/Search">Search</Link>
              </li>
            </ul>
          </li>
          <li>
            <Link to="/RouterContextObj">路由上下文对象</Link>
          </li>
          <li>
            <Link to="/StoreDemo">redux示例</Link>
          </li>
          <li>
            <Link to="/StoreReactReduxDemo">react-redux示例</Link>
          </li>
          <li>
            <Link to="/ImmutableDemo">immutable示例</Link>
          </li>
          <li>
            <Link to="/ImmutableReduxDemo">immutable和redux示例</Link>
          </li>
          <li>
            <span>hooks</span>
            <ul>
              <li>
                <Link to="/UseStateDemo">useStateDemo</Link>
              </li>
              <li>
                <Link to="/UseEffectDemo">useEffectDemo</Link>
              </li>
              <li>
                <Link to="/MemoDemo">MemoDemo</Link>
              </li>
              <li>
                <Link to="/UseCallBackDemo">UseCallBackDemo</Link>
              </li>
              <li>
                <Link to="/UseMemoDemo">UseMemoDemo</Link>
              </li>
              <li>
                <Link to="/UseRefDemo">UseRefDemo</Link>
              </li>
              <li>
                <Link to="/UseContextDemo">UseContextDemo</Link>
              </li>
              <li>
                <Link to="/UseReducerDemo">UseReducerDemo</Link>
              </li>
              <li>
                <Link to="/UseReducerAndUseContextDemo">UseReducerAndUseContextDemo</Link>
              </li>
              <li>
                <Link to="/UseTransitionDemo">UseTransitionDemo</Link>
              </li>

              <li>
                <Link to="/UseIdDemo">UseIdDemo</Link>
              </li>
              <li>
                <Link to="/UseDebugDemo">UseDebugDemo</Link>
              </li>
              <li>
                <Link to="/UseDeferredDemo">UseDeferredDemo</Link>
              </li>
              <li>
                <Link to="/UseSyncExternalStoreDemo">UseSyncExternalStoreDemo</Link>
              </li>
              <li>
                <Link to="/UseInsertionEffectDemo">UseInsertionEffectDemo</Link>
              </li>
              <li>
                <Link to="/DiyHooksDemo">DiyHooksDemo</Link>
              </li>

            </ul>
          </li>
          <li>
            <Link to="/RTKDemo">redux Toolkit</Link>
          </li>
          <li>
            <Link to="/RTKAsyncDemo">redux Toolkit提取异步</Link>
          </li>
        </ul>
        <div className="content-box">
          <Switch>
            <Redirect exact={true} from="/" to="/Home" ></Redirect>
            {
              routes.map(item => <Route key={item.path} path={item.path} component={WithLazy(() => import(`./views/${item.component}`))} />)
            }
            {/* <Route path="/RouterContextObj" component={()=><Suspense><RouterContextObj></RouterContextObj></Suspense>} /> */}
            {/* 1、 */}
            {/* <Route path="/Lifecycle" component={()=><WithLazy path={()=>import("./views/Lifecycle")} />} /> */}
            {/* 2、 */}
            {/* <Route path="/Lifecycle" component={WithLazy(()=>import("./views/Lifecycle"))} /> */}
            {/* 3、 */}
            {/* <Route path="/Lifecycle" component={WithLazy(()=>import("./views/Lifecycle"))} />*/}
            <Route component={NotFound}></Route>
          </Switch>
        </div>
      </div>
    );
  }
}

export default withRouter(App);
